<!doctype html>
<html lang="en">
  <head>
      <script type="text/javascript">
          var x;
          function test(){
            console.log("事件触发了！")
            var a=0,b=0,c=0,d=0,e=0,f=0,g=0,h=0,result=0;
            a=document.getElementById("medical_complication").value;
            b=document.getElementById('travel_history').value;
            c=document.getElementById('covid_contact').value;
            d=document.getElementById('covid_symptoms1').value;
            e=document.getElementById('covid_symptoms2').value;
            f=document.getElementById('covid_symptoms3').value;
            g=document.getElementById('covid_symptoms4').value;
            h=document.getElementById('covid_symptoms5').value;
            document.getElementById('x').innerHTML=Number((0.3 + Number(a) + Number(b)) * (Number(c) + Number(d) + Number(e) + Number(f) + Number(g) + Number(h))/10.0*100).toFixed(1)+"%";
          }

      </script>
    <meta charset="UTF-8">
    <title>智战疫 | 自我诊断</title>
	<style type="text/css">



        #header {
            background-color:#6699cc;
            color:white;
            text-align:left;
            padding:5px;
            margin-top:10px;
            margin-left:10px;
            margin-right:10px;
       }
        .black_overlay {
				display: none;
				/* 此元素不会被显示*/
				position: absolute;
				top: 0%;
				left: 0%;
				width: 100%;
				height: 100%;
				background-color: #bbbbbb;
				z-index: 1001;
				/* z-index 属性设置元素的堆叠顺序。*/
				opacity: .80;
				/* opacity 属性设置元素的不透明级别。*/
			}

			.white_content {
				display: none;
				position: absolute;
				top: 20%;
				border: 1px solid #bbbbbb;
				border-radius: 20px;
				background-color: white;
				z-index: 1002;
				/*层级要比.black_overlay高，这样才能显示在它前面*/
				overflow: auto;
			}

			#light {
				position: absolute;
				left: 50%;
				/* top: 50%; */
				width: 400px;
				height: 300px;
				margin-left: -150px;
				margin-top: 200px;
			}

			#form_submit {
				text-align: center;
				margin-left: 10px;
				margin-top: 10px;
			}

			#font_login {
				font-weight: 400;
				font-size: 24px;
				color: #BBBBBB;
				text-align: center;
				margin-top: 20px;
			}

			.button_beautiful {
				width: 60px;
				height: 34px;
				/* 高度 */
				border-width: 0px;
				border-radius: 6px;
				background: #4ECDC4;
				cursor: pointer;
				outline: none;
				color: white;
				font-size: 16px;
				margin-top: 20px;
                margin-left: 100px;
			}
	</style>
  </head>
  <body>
      <div id="header">
            <span style="font-family: STXingkai;color: #FFFFFF;font-size: 300%">自我诊断</span>
          <button id="btn0" class="btn0" style="margin-top: 10px;float:right;width:60px"
                    onclick = "window.location.href = 'http://127.0.0.1:5000/Second'">返回</button>
       </div>
      <div class="card shadow-lg p-6 mb-8 " style="margin-top:20px;margin-left:10px;border-style: double;">
          <h2 style="text-align: center;">自我诊断</h2>
          <p style="letter-spacing:1px;line-height:30px;font-size:100%";>尊敬的先生/女士：<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              您好！欢迎来到自我诊断页面。我们的诊断主要根据自身情况估计感染新冠的风险，
              结果仅供参考，真正的判断还需要做进一步的核酸检测。填写完成后，点击“<span style="color:red;">预测</span>”可查看结果。
              <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;以下为自我诊断的主要内容:</p></div>
          <div style="letter-spacing:1px;line-height:40px;margin-left:10px;">
              <form action="/Seven"  >
                  <div class="form-group">
                    <label for="name"style="margin-left:10px;">1、姓名:</label>
                    <input type="text" class="form-control" name = "name" id="name" style="margin-left:10px;" placeholder="写下姓名..." required>
                  </div>
                  <div class="form-row">
                    <div class="form-group col-md-6">
                      <label style="margin-left:10px;"for="age">2、年龄:</label>
                      <select id="age" name = "age" class="form-control" style="margin-left:10px;" required>
                        <option value="1">儿童(1-14)</option>
                        <option value="0">青年(15-35)</option>
                        <option value="0">成年(36-55)</option>
                        <option value="0">老年(55以上)</option>
                      </select>
                    </div>
                    <div class="form-group col-md-6">
                      <label for="blood_group"style="margin-left:10px;">3、血型:</label>
                      <select id="blood_group" name = "blood_group" class="form-control"style="margin-left:10px;" required >
                        <option value="1">O型</option>
                        <option value="0">不是O型</option>
                      </select>
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="medical_complication"style="margin-left:10px;">4、14天是否有接触过来自疫区的病人，或有呼吸道症状的病人</label>
                      <select id="medical_complication" name = "medical_complication"  class="form-control" style="margin-left:10px;" required>
                        <option value="0.8">是</option>
                        <option value="0">否</option>
                      </select>
                  </div>
                  <div class="form-group">
                    <label for="travel_history"style="margin-left:10px;">5、14天内是否有在疫区生活或居住的历史</label>
                      <select id="travel_history" name = "travel_history"  class="form-control"style="margin-left:10px;" required>
                        <option value="0.6">是</option>
                        <option value="0">否</option>
                      </select>
                  </div>
                  <div class="form-group">
                    <label for="covid_contact"style="margin-left:10px;">6、近期是否浑身无力、食欲不振</label>
                      <select id="covid_contact" name = "covid_contact" class="form-control"style="margin-left:10px;" required>
                        <option value="0.8">是</option>
                        <option value="0">否</option>
                      </select>
                  </div>
                  <div class="form-group">
                    <label for="covid_symptoms1"style="margin-left:10px;">7、近期是否偶尔出现明显的呼吸不畅，呼吸困难</label>
                      <select id = "covid_symptoms1" class="form-control" style="margin-left:10px;" required>
                        <option value="1.0">是</option>
                        <option value="0">否</option>
                      </select>
                  </div>
                <div class="form-group">
                    <label for="covid_symptoms2"style="margin-left:10px;">8、近期是否存在发热情况</label>
                      <select id = "covid_symptoms2" class="form-control"style="margin-left:10px;" required>
                        <option value="0.8">是</option>
                        <option value="0">否</option>
                      </select>
                  </div>
                <div class="form-group">
                    <label for="covid_symptoms3"style="margin-left:10px;">9、近期是否感觉头痛，嗅觉不灵敏</label>
                      <select id = "covid_symptoms3" class="form-control"style="margin-left:10px;" required>
                        <option value="0.6">是</option>
                        <option value="0">否</option>
                      </select>
                  </div>
                <div class="form-group">
                    <label for="covid_symptoms4"style="margin-left:10px;">10、是否出现喉咙痛或声音嘶哑</label>
                      <select id = "covid_symptoms4" class="form-control" style="margin-left:10px;" required>
                        <option value="0.7">是</option>
                        <option value="0">否</option>
                      </select>
                  </div>
                <div class="form-group">
                    <label for="covid_symptoms5"style="margin-left:10px;">11、是否有鼻塞、流涕、腹泻等症状</label>
                      <select id = "covid_symptoms5" class="form-control" style="margin-left:10px;" required>
                        <option value="0.5">是</option>
                        <option value="0">否</option>
                      </select>
                  </div>
                  <div class="form-group">
                    <div class="form-check">
                        <br>
                      <input class="form-check-input" type="checkbox" id="gridCheck" required>
                      <label class="form-check-label" for="gridCheck">
                        以上填写信息是真实无误的
                      </label>
                    </div>
                  </div>
              <a   href="javascript:void(0)" onclick="document.getElementById('light').style.display='block'; return false;">
              <button  type="submit" class="btn btn-primary" onclick="test()">预测</button>

              </a>

		<div id="fade" class="black_overlay"></div>
          </form>
        </div>
            <div id="light" class="white_content">
			<div id="font_login">诊断结果</div>

			<!-- 弹窗内容 -->
			<form action="" id="form_submit">
				您的患新冠肺炎可能性为：<span id="x"></span>
                </br>
                <button class="button_beautiful"
                    onclick = "window.location.href = 'http://127.0.0.1:5000/Seven'">确定</button>
			</form>
		</div>
  </body>
</html>